import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image } from 'react-native';
import ImageViewer from './components/ImageViewer';
import Button from './components/Button';

const placeholderImageSource = require('./assets/images/background-image.png')

export default function App() {
    return (
        <View style={styles.container}>
            <View style={styles.imageContainer}>
                <ImageViewer placeholderImageSource={placeholderImageSource} />
            </View>
            <View style={styles.buttonContainer}>
                <Button label="choose the photo" theme="primary"></Button>
                <Button label="use the photo"></Button>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#25292e',
        alignItems: 'center',
        justifyContent: 'center',
    },
    imageContainer: {
        flex: 1,
        paddingTop: 58,
    },
    buttonContainer: {
        flex: 1/3,
        alignItems: 'center',
    }
});
